:root {
  // brand colors

  --gray-1: 23,23,26;
  --gray-2: 46,46,48;
  --gray-3: 72,72,73;
  --gray-4: 95,95,96;
  --gray-5: 120,120,122;
  --gray-6: 146,146,147;
  --gray-7: 171,171,172;
  --gray-8: 197,197,197;
  --gray-9: 223,223,223;
  --gray-10: 246,246,246;

  --color-neutral-1: rgb(var(--gray-1));
  --color-neutral-2: rgb(var(--gray-2));
  --color-neutral-3: rgb(var(--gray-3));
  --color-neutral-4: rgb(var(--gray-4));
  --color-neutral-5: rgb(var(--gray-5));
  --color-neutral-6: rgb(var(--gray-6));
  --color-neutral-7: rgb(var(--gray-7));
  --color-neutral-8: rgb(var(--gray-8));
  --color-neutral-9: rgb(var(--gray-9));
  --color-neutral-10: rgb(var(--gray-10));


  // code blocks vars
  --code-bg-color: #282c34;
  --code-hl-bg-color: var(--color-neutral-3);
  --code-ln-color: #9e9e9e;
  --code-ln-wrapper-width: 2.5rem;

  // font vars
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-family-code: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

  // layout vars
  --navbar-height: 4rem;
  --navbar-logo-height: 2.125rem;
  // --navbar-padding-v: 0.7rem;
  // --navbar-padding-h: 1.5rem;
  --sidebar-width: 18rem;
  --sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
  --content-width: 1100px;
  --homepage-width: 960px;

}